<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>IP地址</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        新增IP地址信息
      </div>
    </div>
    <table
      width="100%"
      border="0"
      class="el-table el-table--border"
      cellspacing="0"
      cellpadding="0"
    >
      <tbody>
      <tr>
        <td
          width="200"
        >所属机房<span style="color:red">*</span>
        </td>
        <td class="ContentTD">

          <el-select
            v-model="baseIpAddressInfo.houseId"
            v-validate="'required'"
            :map="baseHouseInfoMap"
            name="houseId"
            default-value="请选择所在机房"
          >
            <el-option v-for="[key,val] in baseHouseInfoMap" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <div
            id="houseId_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('houseId:required')">请选择所在机房</span>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <label for="sourceUnit">来源单位</label
          ><span style="color:red">*</span>
        </td>
        <td class="ContentTD">
          <el-input
            id="sourceUnit"
            maxlength="100"
            v-model="baseIpAddressInfo.sourceCompany"
            v-validate="'required|max:100'"
            name="sourceUnit"
            placeholder="请填写来源单位"
            show-word-limit
          ></el-input>
          <div
            id="sourceUnit_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('sourceUnit:required')">请填写来源单位</span>
            <span class="field-error" v-show="errors.has('sourceUnit:max')">来源单位长度最大为 100 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="allocationUnit">
            分配单位
          </label>
          <span style="color:red">*</span>
        </td>
        <td class="ContentTD">
          <el-input
            v-model="baseIpAddressInfo.assignCompany"
            v-validate="'required|max:100'"
            name="allocationUnit"
            type="text"
            id="allocationUnit"
            maxlength="100"
            placeholder="请填写分配单位"
          ></el-input>
          <div
            id="allocationUnit_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('allocationUnit:required')">请填写分配单位</span>
            <span class="field-error" v-show="errors.has('allocationUnit:max')">分配单位长度最大为 100 位</span>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <label for="startIp">起始IP地址</label>
          <span style="color:red">*</span>
        </td>
        <td class="ContentTD">
          <el-input
            v-model="baseIpAddressInfo.startIp"
            v-validate="'required|ip'"
            name="startIp"
            id="startIp"
            placeholder="请填写起始IP地址"
          ></el-input>
          <div
            id="startIp_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('startIp:required')">请填写起始IP地址</span>
            <span class="field-error" v-show="errors.has('startIp:ip')">{{ errors.first('startIp')}}</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="endIp">终止IP地址</label>
          <span style="color:red">*</span>
        </td>
        <td class="ContentTD">
          <el-input
            v-model="baseIpAddressInfo.endIp"
            v-validate="'required|ip|checkIpArr'"
            name="endIp"
            id="endIp"
            title="请填写终止IP地址"
          ></el-input>
          <div
            id="endIp_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('endIp:required')">请填写终止IP地址</span>
            <span class="field-error" v-show="errors.has('endIp:ip')">{{ errors.first('endIp')}}</span>
            <span class="field-error" v-show="errors.has('endIp:checkIpArr')">[起始IP地址] 和 [终止IP地址] 必须在同一网段下（前三位相同），示例: [192.168.1.1, 192.168.1.255]</span>
            <span class="field-error" v-show="errors.has('endIp:checkIpLast')">[终止IP地址] 最后一位的地址必须大于 [起始 IP 地址]，示例: [192.168.1.1, 192.168.1.255]</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          使用方式
          <span style="color:red">*</span></td>
        <td class="ContentTD">
          <rx-radio
            v-model="baseIpAddressInfo.useType"
            :map="fieldFormatter.baseIpAddressInfo.useTypeMap"
          ></rx-radio>
        </td>
      </tr>
      <tr>
        <td>
          <label for="useCompany">使用单位</label>
        </td>
        <td class="ContentTD">
          <el-input
            v-model="baseIpAddressInfo.useCompany"
            v-validate="'max:64'"
            name="useCompany"
            id="useCompany"
            maxlength="64"
            show-word-limit
            placeholder="请填写使用单位"
          ></el-input>
          <div
            id="useCompany_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('useCompany:max')">使用单位长度最大为 64 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>单位属性<span style="color:red">*</span></td>
        <td class="ContentTD">
          <el-select
            v-model="baseIpAddressInfo.companyAttr"
            v-validate="'required'"
            name="companyAttr"
            default-value="请选择您的单位属性"
          >
            <el-option v-for="[key,val] in fieldFormatter.baseCustomer.unitNatureMap" :label="val" :key="key" :value="key"></el-option>
          </el-select>
          <div
            id="companyAttr_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('companyAttr:required')">请选择您的单位属性</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="idType">证件类型</label>
        </td>
        <td class="ContentTD">
          <el-select v-model="baseIpAddressInfo.idType">
            <el-option v-for="[key,val] in fieldFormatter.baseCustomer.idTypeMap" :label="val" :key="key" :value="key"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>
          <label for="idNumber">证件号码</label>
        </td>
        <td class="ContentTD">
          <el-input
            v-model="baseIpAddressInfo.idNumber"
            v-validate="'max:50'"
            name="idNumber"
            id="idNumber"
            maxlength="50"
            show-word-limit
            placeholder="请填写您的证件号码"
          ></el-input>
          <div
            id="idNumber_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('idNumber:max')">证件号码长度最大为 50 位</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <label for="assignUseTime">分配使用时间</label>
          <span style="color:red">*</span>
        </td>
        <td class="ContentTD">
          <el-date-picker
            id="assignUseTime"
            v-model="baseIpAddressInfo.assignUseTime"
            v-validate="'required'"
            name="assignUseTime"
            type="date"
            placeholder="请选择分配使用时间"
          ></el-date-picker>
          <div
            id="assignUseTime_message"
            class="msg"
          >
            <span class="field-error" v-show="errors.has('assignUseTime:required')">请选择分配使用时间</span>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div align="center">
      <el-button
        type="primary"
        @click="addBaseIpAddressInfo"
      >确认</el-button>
      <el-button
        @click="_forward('basic-data/admin_ip_seg_info')"
      >返回</el-button>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/model/BaseIpAddressInfo.js"></script>
  <script src="/static/js/module/basic-data/api/baseIpAddressInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/add/admin_ip_seg_info_add.js"></script>
</div>
</body>
</html>
